<template>
  <!-- <div
    class="detail"
    @click="$router.push({ name: 'Article', params: { id: detailItem.id } })"
  > -->
  <div class="detail" @click="pathPush">
    <img
      src="http://i1.sinaimg.cn/IT/2010/0419/201041993740.jpg"
      alt=""
      style="width: 100%"
    />
    <div class="tip">
      <span>12345</span>
      <span>{{ detailItem.commentlen ? detailItem.commentlen : 54321 }}</span>
    </div>
    <p>{{ detailItem.name }}</p>
  </div>
</template>

<script>
export default {
  props: ["detailItem"],
  methods: {
    pathPush() {
      if (this.$route.path != `/article/${this.detailItem.id}`) {
        this.$router.push(`/article/${this.detailItem.id}`);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.detail {
  position: relative;
  margin: 0px 0px 2.778vw 0px;
  p {
    font-size: 3.611vw;
    padding: 1.389vw 0vw;
  }
  .tip {
    position: absolute;
    left: 0vw;
    width: 100%;
    color: white;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0.556vw 2.222vw;
    transform: translateY(-5.556vw);
    font-size: 3.333vw;
    background: rgba(0, 0, 0, 0.5);
  }
}
</style>